<template>
	<view class="mt-24 bg-FEEFE8 br-16">
		<view class="h-60 fd-r px-30">
			<image
				class="w-94 h-42"
				src="@/static/tabbar/tab1/xsqg.png"
				mode=""
			></image>
			<text class="mx-16 fs-30 fw-b text-FD3C49">15点场</text>
			<view class="pa-6  bg-FD3C49 rd-12 fd-r jc-c">
				<text class="fs-20 c-white fw-b">{{ hh }}</text>
			</view>
			<text class="mx-4 fs-28 text-FD3C49 fw-b">:</text>
			<view class="pa-6 bg-FD3C49 rd-12 fd-r jc-c">
				<text class="fs-20 c-white fw-b">{{ mm }}</text>
			</view>
			<text class="mx-4 fs-28 text-FD3C49 fw-b">:</text>
			<view class="pa-6 bg-FD3C49 rd-12 fd-r jc-c">
				<text class="fs-20 c-white fw-b">{{ ss }}</text>
			</view>
		</view>
		<view class="px-16 py-30 br-16 bgc-white fd-r fw-w">
			<block v-for="item in 4" :key="item">
				<view class="w-full-25 py-14 fd-c ai-c">
					<image
						class="w-100 h-100"
						src="../../../static/logo.png"
						mode=""
					></image>
					<view class="coupon w-96 h-42 mt-10 px-4 fd-r">
						<text class="fs-26 fw-w text-000000">￥</text>
						<text class="flex1 fs-26 text-000000">50</text>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { onMounted, onUnmounted, ref } from 'vue';

let time: number = 12345;
const hh = ref('00');
const mm = ref('00');
const ss = ref('00');

function HFormate() {
	ss.value = (time % 60).toString().padStart(2, '0');
	mm.value = (Math.floor(time / 60) % 60).toString().padStart(2, '0');
	hh.value = Math.floor(time / 3600)
		.toString()
		.padStart(2, '0');
}

let timer: NodeJS.Timeout;
onMounted(() => {
	timer = setInterval(() => {
		time -= 1;
		HFormate();
	}, 1000);
});

onUnmounted(() => {
	clearInterval(timer);
});
</script>

<style>
	.coupon {
		background-image: url('/static/tabbar/tab1/coupon1.png');
		background-size: 104rpx 42rpx;
	}
</style>
